<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流星</title>
    <style>
        /* 重置所有元素的默认边距和填充 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 设置body的高度为视口高度，隐藏溢出内容，并设置背景颜色 */
        body{
            height: 100vh;
            overflow: hidden;
            background-color: #0a0707;
             
        }
        /* 设置容器的位置和背景图片 */
        #container{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:url("img/1.jpeg");
            background-size: cover;
            background-position-x: center;
        }
        /* 设置流星的样式和动画 */
        span{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 2px;
            background-color: rgb(194, 238, 220);
            border-radius: 50%;
            box-shadow: 0 0 0 2px rgba(255,255,255,.1),
                        0 0 0 4px rgba(255,255,255,.1),
                        0 0 15px rgba(255, 255, 255,.1);
            animation: animate 2s linear infinite;
        }
        /* 设置第一个流星的位置和动画延迟 */
        span:nth-child(1){
            top: 0;
            right: 0;
            left: initial;
            animation-delay: 0s;
            animation-duration: 1s;
        }
        /* 设置第二个流星的位置和动画延迟 */
        span:nth-child(2){
            top: 0;
            right: 80px;
            left: initial;
            animation-delay: 0.2s;
            animation-duration: 3s;
        }
        /* 设置流星的伪元素样式 */
        span::before{
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 300px;
            height: 2px;
            background:linear-gradient(90deg, #fff,transparent);
        }
        /* 定义流星的动画效果 */
        @keyframes animate{
            0%{
                transform: rotate(315deg)translateX(0);
                opacity: 1;
            }
            90%{
                opacity: 1;
            }
            100%{
                transform: rotate(315deg)translateX(-1000px);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <!-- 包含流星效果的容器 -->
    <div id="container">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>